<template>
  <PageDialog
    :title="title"
    v-model:visible="shows"
    :width="dialogInfo.width"
    :bt-list="dialogInfo.btList"
  >
    <page-form
      class="paddingBox order-model-formBox flex_wrap_start_start"
      v-model:ref-obj="formInfo.ref"
      :data="formInfo.data"
      :field-list="formInfo.fieldList"
      :rules="formInfo.rules"
      :label-width="formInfo.labelWidth"
    >
      <template v-slot:form-returnTime>
        <el-date-picker
          v-model="formInfo.data.returnTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm"
          placeholder="选择日期"
        >
        </el-date-picker>
      </template>
    </page-form>
  </PageDialog>
</template>
<script setup name="proportion">
import { getRrgUserList } from '@/api/base.js'
import moment from 'moment'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  showDialog: {
    type: Boolean,
    default: false,
  },
  options: {
    type: Array,
    default: () => {
      return []
    },
  },
  row: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const formInfo = ref({
  ref: null,
  data: {
    ...props.row,
    returnTime: moment(new Date()).format('YYYY-MM-DD HH:mm'),
  },
  fieldList: [
    {
      label: '借用部门',
      value: 'borrowDeptName',
      type: 'input',
      disabled: true,
      required: true,
    },
    {
      label: '借用人',
      value: 'borrowUserName',
      type: 'input',
      disabled: true,
      required: true,
    },
    {
      label: '借用时间',
      value: 'borrowTime',
      type: 'input',
      disabled: true,
      required: true,
    },
    {
      label: '预计归还时间',
      value: 'preReturnTime',
      type: 'input',
      disabled: true,
      required: true,
    },
    {
      label: '实际归还时间',
      value: 'returnTime',
      type: 'slot',
      required: true,
    },
  ],
  rules: {
    returnTime: [
      {
        required: true,
        message: '请选择实际归还时间',
        trigger: 'change',
      },
    ],
  },
  labelWidth: '120px',
})
// 弹窗相关
const dialogInfo = ref({
  width: '700px',
  btLoading: false,
  btList: [
    { label: '关闭', event: handleClose, show: true },
    {
      label: '保存',
      type: 'primary',
      event: save,
      show: true,
    },
  ],
})
const shows = computed({
  get() {
    return props.showDialog
  },
  set(newValue) {
    emits('update:showDialog', newValue) // 更新父组件shows
  },
})
function save() {
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      emits('callback', formInfo.value.data, () => {
        handleClose()
      })
    }
  })
}

function handleClose() {
  shows.value = false
  emits('reset')
}
</script>

<style scoped lang="scss">
.flex_wrap_start_start {
  justify-content: space-around;
}
</style>
